<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>onChange</title>
		<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
		<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
	</head>
	<body>
		<div id="example"></div>

		<script type="text/babel">
			class Content extends React.Component {
				render() {
					return  <div>
						<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
						<h4>{this.props.myDataProp}</h4>
					</div>;
				}
			}
			
			class HelloMessage extends React.Component {
				constructor(props) {
					super(props);
					this.state = {value: 'Hello Runoob!'};
					this.handleChange = this.handleChange.bind(this);
				}
 
				handleChange(event) {
					this.setState({value: event.target.value});
				}
				
				render() {
					var value = this.state.value;
					return <div>
						<Content myDataProp = {value} 
						updateStateProp = {this.handleChange}></Content>
					</div>;
				}
			}

			ReactDOM.render(
				<HelloMessage />,
				document.getElementById('example')
			);
		</script>
	</body>
</html>
